require([
  'jquery',
  'pageInit',
  'dataTableFilter',
  'loading',
], function($, vamakerPage, VamDataTable, VamLoader) {
  $(function() {
    var 
      $dataTable = $('#data-table'),
      dataUrl = VAM.getVar('MEDIA_LIST_DATA_LIST'),
      $filterFrm = $('#filter-frm'),
      $filterChannel = $filterFrm.find('input[name="filter-channel"]'),
      $filterTraffic = $filterFrm.find('input[name="filter-traffic"]'),
      $reportDataThead = $dataTable.find('thead'),
      $loadingWrap = new VamLoader().loader($('#list-loading-wrap')),
    listTable, tableOptions = {};
    // Table settings.
    tableOptions = {
      'ajax': {
        'url': dataUrl
      },
      'columns': [
        {'data': 'id'},
        {'data': 'name'},
        {'data': 'belongChannel'},
        {'data': 'trafficType'},
        {'data': 'size'},
        {'data': 'type'},
        {'data': 'allowFormat'},
        {'data': 'systemType'},
        {'data': 'position'},
        {'data': 'price'},
        // {'data': 'blackList'}
      ],
      'columnDefs': [
        {
          'targets': [0,1,2,3,4,5,6,7,8],
          'render': function (data, type, full, meta) {
            return '<p title="' + data + '">' + data +'</p>';
          }
        },
        {
          'targets': -1,
          'visible': VAM.getVar('LIST_FILTER_STATUS'),
          'render': function (data, type ,full, meta) {
            var check = data === "open" ? "checked" : "",
              resultStr;
            resultStr = '<p class="text-success" title="' + data + '"><i class="fa fa-rmb"></i> ' + data +'</p>';
            return resultStr;
          }
        }
      ],
      'initComplete': function() {
        tableResize = new VamDataTable().columnResize($dataTable);
      },
    };
    $dataTable
    .on('preXhr.dt', function(evt) {
      $loadingWrap.show();
    });
    listTable = new VamDataTable().dataTables($dataTable, tableOptions);
    // After table data list.
    listTable.on('xhr.dt', function(evt) {
      $loadingWrap.fadeOut();
    });

    $filterChannel.on('change', function(evt) {
      var $me = $(this),
      meVal = $me.val(),
      column = $me.data('column');
      evt.preventDefault();
      $filterChannel.parent().removeClass('active');
      $me.parent().addClass('active');
      listTable.columns(column).search(meVal).draw();
    });
    
    $filterTraffic.on('change', function(evt) {
      var $me = $(this),
      meVal = $me.val(),
      column = $me.data('column');
      evt.preventDefault();
      $filterTraffic.parent().removeClass('active');
      $me.parent().addClass('active');
      listTable.columns(column).search(meVal).draw();
    });
  });
});
